<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/1/5
  Time: 10:41 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>响应式导航</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/mvc/plugins/bootstrap/css/bootstrap.css">
    <style>
        #nav_header{
            width: 50px;
            height: 50px;

            /*设置图片的边角*/
            border-radius: 50%;

            /*设置阴影部分*/
            opacity: 0.4;
        }

        #nav_header:hover{
            opacity: 1;
        }
    </style>
</head>
<body>

<%--   导航begin...--%>
   <div class="container-fluid">
       <div class="row">
           <nav class="navbar navbar-inverse" role="navigation">
               <div class="container-fluid">
                   <div class="navbar-header">
                       <button type="button" class="navbar-toggle" data-toggle="collapse"
                               data-target="#example-navbar-collapse">
                           <span class="sr-only">切换导航</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                       </button>
                       <a class="navbar-brand" href="#">宿迁学院</a>
                   </div>
                   <div class="collapse navbar-collapse" id="example-navbar-collapse">
                       <ul class="nav navbar-nav navbar-right">
                           <li class="active"><a href="#">admin</a></li>
                           <li><a href="#">登录</a></li>
                           <li><a href="#">注册</a></li>
                           <li><a href="#">安全退出</a></li>
                           <li><a href="#">我的收藏</a></li>
                           <li><a href="#">我的订单</a></li>
                           <li><img src="/mvc/imgs/zly.jpg" id="nav_header"></li>
                       </ul>
                   </div>
               </div>
           </nav>
       </div>
   </div>
<%--    导航end ..--%>



<%--    必须先引入jquery.min.js--%>
    <script src="/mvc/plugins/jquery/jquery.min.js"></script>
    <script src="/mvc/plugins/bootstrap/js/bootstrap.js"></script>
</body>
</html>
